成品連結：CSS Variables

第三天我們要來利用 JS 操作 CSS，同時也會用到 CSS 內建的變數功能 (類似 SASS/SCSS 的變數功能)。

事前準備

步驟

• 監聽各個元素
  • 當 input 改變時重新渲染 html

HTML & CSS 程式碼

開始寫程式碼

使用 CSS 變數

這裡可以看到在 CSS 使用了變數，但要注意較舊的瀏覽器可能會有支援度的問題(像是 IE 就完全不支援)

/* 宣告變數 */
:root {
    --base: #ffc600;
    --blur: 10px;
    --padding: 10px;
}
    
/* 使用變數 */
img {
    padding: var(--padding);
    background-color: var(--base);
    filter: blur(var(--blur));
}

使用時要先用:root這個選擇器，其實就等於選擇了html tag，宣告時要再變數前加上--；而使用時要用var()包住該變數

加上 javaScript

這裡使用了三個input來控制padding、blur、以及base，所以我們要來監聽當 handler 值改變時的事件；事件的選擇可以使用change，但缺點是要等鬆開滑鼠按鍵後才會觸發事件，沒辦法隨著拖曳時改變畫面狀態，但我後來發現input可以做到！不只可以用在range，也能用在其它類型的input上，可以在下方參考資料[4]看更多介紹。

const inputs = document.querySelectorAll('.controls input');

// 分別在各個 input 設定監聽事件
inputs.forEach(cur => {
    cur.addEventListener('input', function(e) {
        // code here
    });
});

接著我們要讀取input[type="range"]以及input[type="color"]的值。在 html 中可以看到我們已設定最大、小值 & 預設值，並透過element.value來讀取值

inputs.forEach(cur => {
    cur.addEventListener('input', function(e) {
        // 讀取 input 中的值並儲存在變數 value 中
        let value = cur.value;
    });
});

接著判斷如果選擇的是blur、padding或是base，會分別改變 CSS 變數中的值，這裡透過setProperty來修改 CSS 變數內容

inputs.forEach(cur => {
    cur.addEventListener('input', function(e) {
        // 讀取 input 中的值並儲存在變數 value 中
        let value = cur.value;
        // 判斷 input 的 id 並改變 CSS 變數的內容
        if(e.target.getAttribute('id') === 'base') {
            document.body.style.setProperty('--base', `${value}`);
        } else if (e.target.getAttribute('id') === 'blur') {
            document.body.style.setProperty('--blur', `${value}px`);
        } else if(e.target.getAttribute('id') === 'spacing') {
            document.body.style.setProperty('--padding', `${value}px`);
        }
    });
});

到這裡程式已可正常運作啦～接下來如果要再改進我覺得可以修改一下寫法寫得簡潔一些，不然重複的 code 其實有點多有點糙啊...

Reference

• Using CSS custom properties (variables)
• HTML DOM Input Range Object
• Input Range value Property
• oninput Event
• Accessing a CSS custom property (aka CSS variable) through JavaScript